<template>
    <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="删除待审核" name="first">
            <el-table :data="waitDelTraineeList" style="width: 100%">
              <el-table-column type="index" width="100" label="序号" fixed="left" ></el-table-column>
              <el-table-column prop="username" label="姓名" width="100"></el-table-column>
              <el-table-column prop="mobile" label="手机号" width="120" ></el-table-column>
              <el-table-column prop="user_code" label="身份证号码" width="180"></el-table-column>
              <el-table-column prop="card_img" label="身份证照片" width="110">
                <template scope="scope">
                  <img :src="scope.row.card_img" width="80" height="80"/>
                </template>
              </el-table-column>
              <el-table-column prop="half_img" label="半身照" width="110">
                <template scope="scope">
                  <img :src="scope.row.half_img" width="80" height="80"/>
                </template>
              </el-table-column>
              <el-table-column prop="user_code_img" label="身份证复印照" width="110">
                <template scope="scope">
                  <img :src="scope.row.user_code_img" width="80" height="80"/>
                </template>
              </el-table-column>
              <el-table-column  label="性别" width="80">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.sex == 1">男</el-tag>
                    <el-tag v-else type="danger">女</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="婚姻状况"  width="80">
                <template slot-scope="scope">
                  <el-tag type="text" effect="light" v-if="scope.row.mer_status==1">已婚</el-tag>
                  <el-tag effect="light" v-if="scope.row.mer_status==2">未婚</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="就业情况" width="80">
                <template slot-scope="scope">
                  <el-tag type="text" effect="light" v-if="scope.row.job_status==2">已就业</el-tag>
                  <el-tag type="text" effect="light" v-if="scope.row.job_status==1">未就业</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="learn_level" label="文化程度" width="100"></el-table-column>
              <el-table-column prop="job_to" label="就业意向" width="180"></el-table-column>
              <el-table-column prop="age" label="年龄" width="180"></el-table-column>
              <el-table-column prop="birth" label="出生日期" width="180"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                  <el-button size="small" type="danger" @click="delClick(scope.$index, scope.row)">同意</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="编辑待审核" name="second">
            <el-table :data="waitToTraineeList" style="width: 100%">
              <el-table-column type="index" width="100" label="序号" fixed="left"></el-table-column>
              <el-table-column prop="username" label="姓名" width="100"></el-table-column>
              <el-table-column prop="mobile" label="手机号" width="120" ></el-table-column>
              <el-table-column prop="user_code" label="身份证号码" width="180"></el-table-column>
              <el-table-column prop="card_img" label="身份证照片" width="110">
                <template scope="scope">
                  <img :src="scope.row.card_img" width="80" height="80"/>
                </template>
              </el-table-column>
              <el-table-column prop="half_img" label="半身照" width="110">
                <template scope="scope">
                  <img :src="scope.row.half_img" width="80" height="80"/>
                </template>
              </el-table-column>
              <el-table-column prop="user_code_img" label="身份证复印照" width="110">
                <template scope="scope">
                  <img :src="scope.row.user_code_img" width="80" height="80"/>
                </template>
              </el-table-column>
              <el-table-column  label="性别" width="80">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.sex == 1">男</el-tag>
                    <el-tag v-else type="danger">女</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="婚姻状况"  width="80">
                <template slot-scope="scope">
                  <el-tag type="text" effect="light" v-if="scope.row.mer_status==1">已婚</el-tag>
                  <el-tag effect="light" v-if="scope.row.mer_status==2">未婚</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="就业情况" width="80">
                <template slot-scope="scope">
                  <el-tag type="text" effect="light" v-if="scope.row.job_status==2">已就业</el-tag>
                  <el-tag type="text" effect="light" v-if="scope.row.job_status==1">未就业</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="learn_level" label="文化程度" width="100"></el-table-column>
              <el-table-column prop="job_to" label="就业意向" width="180"></el-table-column>
              <el-table-column prop="age" label="年龄" width="180"></el-table-column>
              <el-table-column prop="birth" label="出生日期" width="180"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                  <el-button size="small" type="danger" @click="editClick(scope.$index, scope.row)">同意</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default ({
  data() {
    return{
      activeName: "first", //切换
      waitDelTraineeList: [], //删除待审核列表"
      waitToTraineeList: [], //编辑待审核列表
    };
  },
  created(){
    this.updateTrainee();
    this.Delete();
  },
  methods:{
    // 删除
    async Delete() {
      let waitDelTrainee = await this.$api.home.waitDelTrainee();
      if (waitDelTrainee.data.code == 200) {
        this.waitDelTraineeList = waitDelTrainee.data.data;
      }
    },
    //学员修改待确认列表
    async updateTrainee(){
      let edit = (await this.$api.home.updateTrainee()).data.data
      this.waitToTraineeList = edit
    },

    //同意删除
    delClick(index, row) {
      const params = {
        user_id: row.id
      };
      this.$confirm("此操作将永久删除该学员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let delTrainee = await this.$api.home.delTrainee(params);
          if (delTrainee.data.code == 200) {
            this.waitDelTraineeList.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.Delete()
          }
        })
    },

    //同意编辑
    editClick(index,row) {
      console.log("value.id",row.id);
      const params = {
        user_id: row.uid
      };
      this.$confirm("此操作将同意学员信息修改, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let delTrainee = await this.$api.home.upTrainee(params);
          console.log("delTrainee",delTrainee);
          if (delTrainee.data.code == 200) {
            this.waitToTraineeList.splice(index, 1);
            this.$message({
              type: "success",
              message: "审核成功!"
            });
          }else{
            this.$notify.error({
              title: '错误',
              message: delTrainee.data.msg
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核"
          });
        });
    },
  }
})
</script>
<style lang="less" scoped>
.chackimg{
  width: 100%;
  height: 100%;
}
</style>